<template>
	<view class="bbbox" style="padding-bottom:100rpx;" @touchmove.stop.prevent="moveHandle">
		<page-meta :page-style="MaskShow ?'height:100%;overflow-y:hidden' : ''" />
		<view class="Mask" :style="{top:MaskTop}" v-show="MaskShow" catchtouchmove="ture"></view>
		<view class="search">
			<!-- search -->
			<u-search placeholder="输入搜索内容" margin="30rpx" @change="onSearch" @search="comfirmSearch" actionText="取消"
				@custom="deaction" :clearabled="true" v-model="keyword">
			</u-search>
		</view>
		<!-- 历史记录 -->
		<view class="history" v-if="ShowNum==1? true : false">
			<view class="history_name">
				历史记录
			</view>
			<view class="ul">
				<view class="li" v-for="item,index in historyKeywordList" @click="ClickSearch(item)" :key="index">
					{{item}}
				</view>

			</view>
			<view class="del" @click="del">
				×
			</view>
		</view>
		<!-- 热门 -->
		<view class="history" v-if="ShowNum==1">
			<view class="history_name">
				热门
			</view>
			<view class="ul">
				<view class="li" v-for="item,index in hotKeywordList" @click="ClickSearch(item.keyword)" :key="index">
					{{item.keyword}}
				</view>
				<view style="color:#ccc;text-align:center;padding-top:30rpx;font-size:30rpx"
					v-if="hotKeywordList.length==0">
					没有更多了
				</view>
			</view>
		</view>
		<!-- ShowNum==2 -->
		<view v-else-if="ShowNum==2">
			<view class="data" v-for="item,index in data" :key="index" @click="Allclickone(item)">{{item}}</view>
			<view style="color:#ccc;text-align:center;padding-top:30rpx;font-size:30rpx" v-if="data.length==0">
				没有更多了
			</view>
		</view>


		<!-- ShowNum==3 回车以及点击历史热门单品事件 -->
		<view class="mune" v-else-if="ShowNum==3">
			<view class="goodsList" id="demo">
				<view>
					<u-collapse @open="Open">
						<u-collapse-item title="综合" name="Docs guide" disabled>
							<text class="u-collapse-content">综合</text>
						</u-collapse-item>
					</u-collapse>
				</view>
				<view @click="Open">
					<u-collapse>
						<u-collapse-item title="价格" name="Docs guide">
							<text class="u-collapse-content" v-for="item,index in priceArray" :key="index"
								@click="priceSelect(item.order)">{{item.text}}</text>
						</u-collapse-item>
					</u-collapse>
				</view>
				<view @click="Open">
					<u-collapse>
						<u-collapse-item title="分类" name="Docs guide">
							<text class="u-collapse-content" @click="fenlei(item.id)" v-for="item in filterCategory"
								:key="item.id">{{item.name}}</text>

						</u-collapse-item>
					</u-collapse>
				</view>


			</view>
			<view class="big">
				<view class="CAT" v-for="item,index in goodsList" :key="item.id">
					<image :src="item.list_pic_url" mode="widthFix" style="width: 350rpx;"></image>
					<view style="text-align:center">{{item.name}}</view>
					<view style="margin-top:40rpx;text-align:center;color:rgb(197, 118, 13)">
						{{'￥'+item.retail_price+'.00元'}}
					</view>
				</view>
				<view style="color:#ccc;text-align:center;padding-top:30rpx;font-size:30rpx;margin-left: 300rpx;"
					v-if="goodsList.length==0">
					没有更多了
				</view>
			</view>


		</view>

		<view v-show="moreShow" style="color:#ccc;text-align:center;padding-top:30rpx;font-size:30rpx">
			没有更多了
		</view>
	</view>
</template>

<script>
	import request from "../../request/request.js";
	import {
		SearchAPI,
		ClaerSearchAPI,
		onSearchAPI,
		comfirmSearchAPI
	} from "../../request/api.js"
	let timer = null
	export default {
		data() {
			return {
				priceArray: [{
						order: "desc",
						text: "价格从高到低"
					},
					{
						order: "asc",
						text: "价格从低到高"
					}
				],
				MaskShow: false,
				moreShow: false,
				filterCategory: [],
				goodsList: [],
				goodsList1: [],
				AllLists: [],
				data: [],
				ShowNum: 1,
				keyword: '',
				hotKeywordList: [],
				historyKeywordList: [],
				distance: "",
				page: 1,
				size: 20,
				order: "desc",
				flag: true,
				SearchHieght: 0,
				navHeight: 0,
				ShowNumIn: false
			}
		},
		onLoad() {
			let screenHeight = wx.getSystemInfoSync().screenHeight
			let bottom = wx.getSystemInfoSync().safeArea.bottom
			this.distance = screenHeight - bottom + 50
			console.log(this.distance)
			request({
				url: SearchAPI,
				successCallBack: (res) => {
					console.log(res)
					const {
						hotKeywordList,
						historyKeywordList
					} = res.data.data
					this.historyKeywordList = historyKeywordList;
					this.hotKeywordList = hotKeywordList;
					console.log(this.historyKeywordList, this.hotKeywordList)
				}
			})

		},
		onReachBottom() {
			this.moreShow = true
			this.page += 1
			// 设置节流阀 当请求结束后再把阀门打开执行下一次的请求
			// 防止一直下拉刷新不断请求数据
			if (this.flag) {
				// 关门
				this.flag = false
				setTimeout(() => {
					request({
						url: comfirmSearchAPI,
						data: {
							keyword: this.keyword,
							page: this.page
						},
						successCallBack: (res) => {
							console.log(res)
							console.log(1231)
							const {
								goodsList,
							} = res.data.data
							this.goodsList1 = goodsList
							if (this.goodsList1.length != 0) {
								this.goodsList = this.goodsList.concat(this.goodsList1)
								console.log(this.goodsList)

							}

						}
					})
					// 请求完成开门,让下一次请求进入
					this.flag = true
				}, 1000)
			}

		},
		// onReady才完成挂载 用createSelectorQuery获取某个元素距离顶部高度
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.search').boundingClientRect(data => {
				console.log("节点离页面顶部的距离为", data.height);
				this.SearchHieght = data.height
			}).exec();
		},
		methods: {

			priceSelect(order) {

				request({
					url: comfirmSearchAPI,
					data: {
						keyword: this.keyword,
						order: order,
						page: 1,
						size: 20,
						categoryId: 0,
						sort: "price"
					},
					successCallBack: (res) => {
						console.log(res)
						const {
							goodsList,
						} = res.data.data
						this.goodsList = goodsList;
					}
				})
			},
			fenlei(categoryId) {

				request({
					url: comfirmSearchAPI,
					data: {
						keyword: this.keyword,
						order: this.order,
						page: 1,
						size: 20,
						categoryId: categoryId,
						sort: "price"
					},
					successCallBack: (res) => {
						console.log(res)
						const {
							goodsList,
						} = res.data.data
						this.goodsList = goodsList;

					}
				})
			},
			Open() {
				this.MaskShow = !this.MaskShow
			},
			deaction() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			async del() {
				let res = await request({
					url: ClaerSearchAPI,
					successCallBack: (res) => {
						if (res.data.errno == 0 && res.statusCode == 200) {
							this.historyKeywordList = []
						}

					},
					failCallBack: (err) => {
						console.log(err)
					}
				})
			},
			onSearch() {
				// 防抖
				if (timer) {
					clearTimeout(timer)
				}
				// 加个判断,如果 ShowNum==1 说明历史和热门是显示状态,才会执行
				if (this.ShowNum == 1 || this.ShowNum == 2) {
					timer = setTimeout(() => {
						request({
							url: onSearchAPI,
							data: {
								keyword: this.keyword
							},
							successCallBack: (res) => {
								console.log(res)
								const {
									data
								} = res.data
								this.data = data
								this.ShowNum = 2
								// console.log(this.data)
							},
							failCallBack: (err) => {
								console.log(err)
							}
						})
					}, 500)
				}
				// if (this.ShowNum == 3 && this.ShowNumIn) {
				// 	this.ShowNum = 2
				// 	request({
				// 		url: onSearchAPI,
				// 		data: {
				// 			keyword: this.keyword
				// 		},
				// 		successCallBack: (res) => {
				// 			console.log(res)
				// 			const {
				// 				data
				// 			} = res.data
				// 			this.data = data

				// 			// console.log(this.data)
				// 		},
				// 		failCallBack: (err) => {
				// 			console.log(err)
				// 		}
				// 	})
				// }



			},
			comfirmSearch() {
				this.ShowNum = 3
				this.ShowNumIn = true
				// 这里需要在this.$nextTick中才能获取到信息
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this)
					query.select('.mune').boundingClientRect(data => {
						console.log("mune", data)
						this.navHeight = data.height
					}).exec()
				})
				request({
					url: comfirmSearchAPI,
					data: {
						keyword: this.keyword,

					},
					successCallBack: (res) => {
						console.log(res)
						const {
							goodsList,
							filterCategory
						} = res.data.data
						this.goodsList = goodsList
						this.filterCategory = filterCategory

						// console.log(this.data)
					},
					failCallBack: (err) => {
						console.log(err)
					}
				})



			},
			ClickSearch(keyword) {
				this.ShowNumIn = true
				this.keyword = keyword
				this.comfirmSearch()

			},
			Allclickone(keyword) {
				this.keyword = keyword
				this.comfirmSearch()
			}

		},

		computed: {
			MaskTop() {
				return this.SearchHieght + this.navHeight + 40 + 'px'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Mask {
		width: 100%;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100;
		background: rgba(0, 0, 0, .5);
	}


	.goodsList {
		display: flex;
		justify-content: space-around;
	}

	.big {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.CAT {
		width: 350rpx;


	}

	.data {
		height: 40rpx;

		background-color: #fff;
		padding: 20rpx;
	}

	.search {
		padding: 60rxp;
	}

	.history {
		// height: 150rpx;
		padding: 20rpx 30rpx 0rpx;
		background-color: #fff;

	}

	.history_name {
		font-size: 40rpx;
		color: black;
		margin-bottom: 15rpx;
	}

	.ul {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		position: relative;
	}

	.li {
		border: 1px solid #a0a0a0;
		height: 20rpx;
		color: rgb(155, 155, 155);
		font-size: 25rpx;
		padding: 10rpx;
		margin: 15rpx 10rpx;

	}

	.del {
		position: absolute;
		right: 20rpx;
		top: 80rpx;
		font-size: 60rpx;
		font-weight: 700;
	}
</style>
